<template>
  <div class="login-view">
    <div class="box">
      <span class="title">猫眼电影</span>
      <i> <button class="btn">&lt;</button> </i>
    </div>
    <van-form class="v-form">
      <van-field
        class="firstinp"
        v-model="username"
        name="用户名"
        placeholder="请输入手机号或者账号"
        maxlength="11"
        :rules="[{ required: true, message: '请填写账号或者手机号' }]"
      >
        <template #button>
          <van-button size="small" class="btn" @click="fn1"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="yanword"
        name="验证码"
        placeholder="请输入短信验证码"
        maxlength="6"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          color="#DF2D2D"
          native-type="submit"
          @click.prevent="fn"
          >注册</van-button
        >
      </div>
      <h6 class="tologin">
        <router-link to="/login" class="tologin"
          >已有账号？点我登录>>>>></router-link
        >
      </h6>
    </van-form>
    <van-checkbox
      v-model="checked"
      checked-color="#ee0a24"
      icon-size="15px"
      :label-disabled="true"
      class="chekbox"
    >
      <span>我已阅读并同意 <i> 《猫眼用户服务协议》《隐私政策》</i> </span>
    </van-checkbox>
    <p>客服电话 : <span>1010-5335</span></p>
    <div class="prompt-text">未注册的手机号将自动生成新账号</div>
  </div>
</template>

<script>
import { Form, Field, Button, Checkbox, Toast } from "vant";
import axios from "axios";
export default {
  name: "LoginView",
  data() {
    return {
      username: "",
      password: "",
      yanword: "",
      checked: true,
      code: "",
    };
  },
  methods: {
    fn() {
      if (this.checked && this.username && this.password) {
        if (!this.fn2()) {
          Toast.fail("验证码错误");
          return;
        } else {
          let username = this.username;
          let password = this.password;
          axios
            .post("/base/register", {
              username,
              password,
            })
            .then(({ data }) => {
              if (data.code == 0) {
                Toast.success(data.msg + "即将跳转到登录页面");
                this.$router.replace("/login");
              } else {
                Toast.fail(data.msg);
              }
            })
            .catch((error) => {
              Toast.fail(error.data.msg);
            });
        }
      } else {
        Toast.fail("请确认输入账号密码以及勾选协议");
      }
    },
    fn1() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "正在获取验证码，请等待",
      });
      let second = 3;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = `验证码生成中 ${second} 秒`;
        } else {
          clearInterval(timer);
          Toast.clear();
          this.fn3();
        }
      }, 1000);
    },
    fn2() {
      if (this.code != "" && this.code === this.yanword) {
        return true;
      } else {
        return false;
      }
    },
    fn3() {
      var str = "qwertyuiopasdfghjklzxcvbnm0123456789";
      var code = "";
      for (var i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * str.length);
        code += str[index];
      }
      Toast({
        message: "验证码为" + code,
        position: "top",
      });
      this.code = code;
    },
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped lang="scss">
.login-view {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  .box {
    height: 50px;
    background-color: #e54847;
    text-align: center;
    line-height: 50px;
    position: relative;
    .title {
      color: #fff;
      font-size: 18px;
    }
    i {
      position: absolute;
      left: 10px;
      color: #fff;
      font-size: 20px;
      .btn {
        background-color: #e54847;
        border: none;
      }
    }
  }
  .v-form {
    width: 100%;
    // height: 250px;
    .firstinp {
      margin-top: 20px;
      .btn {
        border: none;
        color: #df2d2d;
      }
    }
  }
  .chekbox {
    margin-left: 20px;
    span {
      font-size: 12px;
      color: #00000080;
    }
    i {
      font-style: normal;
      color: #df2d2d;
    }
  }
  p {
    font-size: 10px;
    color: #00000080;
    text-align: center;
    line-height: 10px;
    span {
      color: #df2d2d;
    }
  }
  .prompt-text {
    font-size: 12px;
    color: #999999;
    text-align: center;
    line-height: 40px;
  }
  .tologin {
    color: #df2d2d;
    text-align: center;
    margin: 2px;
  }
}
</style>
